<template>
  <el-collapse v-if="modelValue">
    <el-collapse-item title="图表通用">
      <el-form
        label-position="top"
        class="pl-2 pr-2"
        size="small"
      >
        <el-form-item label="颜色组" v-if="isShowColor">
          <ColorListPicker v-model="modelValue.color" size="small" />
        </el-form-item>
        <el-form-item label="图形堆叠">
          <el-switch v-model="modelValue.stack"></el-switch>
        </el-form-item>
        <el-form-item label="图形上显示标签">
          <el-switch v-model="modelValue.labelShow"></el-switch>
        </el-form-item>
        <el-form-item label="柱状图间隔">
          <el-radio-group v-model="modelValue.barGap">
            <el-radio label="value">数值</el-radio>
            <el-radio label="rate">比例</el-radio>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.barGapRate"
              v-if="modelValue.barGap === 'rate'"
              :min="0" :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.barGapValue"
              v-else
              controls-position="right"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="图例组件（legend）">
      <el-form
        v-if="modelValue.legend"
        label-position="top"
        class="pl-2 pr-2"
        size="small"
      >
        <el-form-item label="图例显示">
          <el-switch v-model="modelValue.legend.show"></el-switch>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="modelValue.legend.type">
            <el-radio-button label="plain">普通</el-radio-button>
            <el-radio-button label="scroll">滚动</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="展示类型">
          <el-radio-group v-model="modelValue.legend.orient">
            <el-radio-button label="horizontal">水平</el-radio-button>
            <el-radio-button label="vertical">垂直</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="左边距离">
          <el-radio-group v-model="modelValue.legend.left">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="left">居左</el-radio-button>
            <el-radio-button label="center">居中</el-radio-button>
            <el-radio-button label="right">居右</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider v-model="modelValue.legend.leftRate" v-if="modelValue.legend.left === 'rate'"
                       :min="0" :max="100" :format-tooltip="rateTooltip" show-input input-size="mini"></el-slider>
            <el-input-number v-model="modelValue.legend.leftValue" v-else-if="modelValue.legend.left === 'value'"
                             controls-position="right"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="顶部距离">
          <el-radio-group v-model="modelValue.legend.top">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="top">居左</el-radio-button>
            <el-radio-button label="middle">居中</el-radio-button>
            <el-radio-button label="bottom">居右</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider v-model="modelValue.legend.topRate" v-if="modelValue.legend.top === 'rate'"
                       :min="0" :max="100" :format-tooltip="rateTooltip" show-input input-size="mini"></el-slider>
            <el-input-number v-model="modelValue.legend.topValue" v-else-if="modelValue.legend.top === 'value'"
                             controls-position="right"></el-input-number>
          </div>
        </el-form-item>

        <el-form-item label="右边距离">
          <el-radio-group v-model="modelValue.legend.right">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider v-model="modelValue.legend.rightRate" v-if="modelValue.legend.right === 'rate'"
                       :min="0" :max="100" :format-tooltip="rateTooltip" show-input input-size="mini"></el-slider>
            <el-input-number v-model="modelValue.legend.rightValue" v-else-if="modelValue.legend.right === 'value'"
                             controls-position="right"></el-input-number>
          </div>
        </el-form-item>

        <el-form-item label="底部距离">
          <el-radio-group v-model="modelValue.legend.bottom">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider v-model="modelValue.legend.bottomRate" v-if="modelValue.legend.bottom === 'rate'"
                       :min="0" :max="100" :format-tooltip="rateTooltip" show-input input-size="mini"></el-slider>
            <el-input-number v-model="modelValue.legend.bottomValue" v-else-if="modelValue.legend.bottom === 'value'"
                             controls-position="right"></el-input-number>
          </div>
        </el-form-item>

        <el-form-item label="宽度">
          <el-radio-group v-model="modelValue.legend.width">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider v-model="modelValue.legend.widthRate" v-if="modelValue.legend.width === 'rate'"
                       :min="0" :max="100" :format-tooltip="rateTooltip" show-input input-size="mini"></el-slider>
            <el-input-number v-model="modelValue.legend.widthValue" v-else-if="modelValue.legend.width === 'value'"
                             controls-position="right"></el-input-number>
          </div>
        </el-form-item>

        <el-form-item label="高度">
          <el-radio-group v-model="modelValue.legend.height">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.legend.heightRate"
              v-if="modelValue.legend.height === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.legend.heightValue"
              v-else-if="modelValue.legend.height === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>
        <el-form-item label="文本对齐">
          <el-radio-group v-model="modelValue.legend.align">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="left">居左</el-radio-button>
            <el-radio-button label="right">居右</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图例内边距">
          <el-input-number v-model="modelValue.legend.padding" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="图例每项间隔">
          <el-input-number v-model="modelValue.legend.itemGap" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="图例每项宽度">
          <el-input-number v-model="modelValue.legend.itemWidth" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="图例每项高度">
          <el-input-number v-model="modelValue.legend.itemHeight" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="网格坐标（grid）">
      <el-form
        v-if="modelValue.grid"
        label-position="top"
        class="pl-2 pr-2"
        size="small"
      >
        <el-form-item label="网格坐标显示">
          <el-switch v-model="modelValue.grid.show"></el-switch>
        </el-form-item>
        <el-form-item label="是否包含刻度">
          <el-switch v-model="modelValue.grid.containLabel"></el-switch>
        </el-form-item>
        <el-form-item label="左边距离">
          <el-radio-group v-model="modelValue.grid.left">
            <!--<el-radio-button label="auto">自动</el-radio-button>-->
            <el-radio-button label="left">居左</el-radio-button>
            <el-radio-button label="center">居中</el-radio-button>
            <el-radio-button label="right">居右</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.leftRate"
              v-if="modelValue.grid.left === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.grid.leftValue"
              v-else-if="modelValue.grid.left === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>
        <el-form-item label="顶部距离">
          <el-radio-group v-model="modelValue.grid.top">
            <!--<el-radio-button label="auto">自动</el-radio-button>-->
            <el-radio-button label="top">顶部</el-radio-button>
            <el-radio-button label="middle">中间</el-radio-button>
            <el-radio-button label="bottom">底部</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.topRate"
              v-if="modelValue.grid.top === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.grid.topValue"
              v-else-if="modelValue.grid.top === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>

        <el-form-item label="右边距离">
          <el-radio-group v-model="modelValue.grid.right">
            <!--<el-radio-button label="auto">自动</el-radio-button>-->
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.rightRate"
              v-if="modelValue.grid.right === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.grid.rightValue"
              v-else-if="modelValue.grid.right === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>

        <el-form-item label="底部距离">
          <el-radio-group v-model="modelValue.grid.bottom">
            <!--<el-radio-button label="auto">自动</el-radio-button>-->
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.bottomRate"
              v-if="modelValue.grid.top === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="small"
            />
            <el-input-number
              v-model="modelValue.grid.bottomValue"
              v-else-if="modelValue.grid.top === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>

        <el-form-item label="宽度">
          <el-radio-group v-model="modelValue.grid.width">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.widthRate"
              v-if="modelValue.grid.width === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="mini"
            />
            <el-input-number
              v-model="modelValue.legend.widthValue"
              v-else-if="modelValue.grid.width === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>

        <el-form-item label="高度">
          <el-radio-group v-model="modelValue.grid.height">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">数值</el-radio-button>
            <el-radio-button label="rate">比例</el-radio-button>
          </el-radio-group>
          <div>
            <el-slider
              v-model="modelValue.grid.heightRate"
              v-if="modelValue.grid.height === 'rate'"
              :min="0"
              :max="100"
              :format-tooltip="rateTooltip"
              show-input
              input-size="mini"
            />
            <el-input-number
              v-model="modelValue.grid.heightValue"
              v-else-if="modelValue.grid.height === 'value'"
              controls-position="right"
            />
          </div>
        </el-form-item>
        <el-form-item label="网格背景色">
          <ColorPicker
            v-model="modelValue.grid.backgroundColor"
            size="small"
            show-alpha
          />
        </el-form-item>
        <el-form-item label="网格线宽度">
          <el-input-number v-model="modelValue.grid.borderWidth" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="网格线颜色">
          <ColorPicker
            v-model="modelValue.grid.borderColor"
            size="small"
            show-alpha
          />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="网格 x 轴（xAxis）">
      <el-form
        v-if="modelValue.xAxis"
        label-position="top"
        class="pl-2 pr-2"
        size="small"
      >
        <el-form-item label="是否显示">
          <el-switch v-model="modelValue.xAxis.show"></el-switch>
        </el-form-item>
        <el-form-item label="位置">
          <el-radio-group v-model="modelValue.xAxis.position">
            <el-radio-button label="top">顶部</el-radio-button>
            <el-radio-button label="bottom">底部</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="偏移量">
          <el-input-number
            v-model="modelValue.xAxis.offset"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="是否是反向坐标轴">
          <el-switch v-model="modelValue.xAxis.inverse"></el-switch>
        </el-form-item>
        <el-form-item label="坐标轴名称">
          <el-input v-model="modelValue.xAxis.name"></el-input>
        </el-form-item>
        <el-form-item label="坐标轴名称位置">
          <el-radio-group v-model="modelValue.xAxis.nameLocation">
            <el-radio-button label="start">头部</el-radio-button>
            <el-radio-button label="middle">中间</el-radio-button>
            <el-radio-button label="end">尾部</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="坐标轴名称间隙">
          <el-input-number
            v-model="modelValue.xAxis.nameGap"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="坐标轴名称旋转">
          <el-slider
            v-model="modelValue.xAxis.nameRotate"
            :min="-90"
            :max="90"
            show-input
            input-size="small"
          />
        </el-form-item>

        <hr class="ml-2 mr-2" />
        <template v-if="modelValue.xAxis.axisLabel">
          <el-form-item label="x轴刻度标签-是否显示">
            <el-switch v-model="modelValue.xAxis.axisLabel.show"></el-switch>
          </el-form-item>
          <el-form-item label="x轴刻度标签-旋转角度">
            <el-slider
              v-model="modelValue.xAxis.axisLabel.rotate"
              :min="-90"
              :max="90"
              show-input
              input-size="small"
            />
          </el-form-item>
          <el-form-item label="x轴刻度标签-显示间隔">
            <el-radio-group v-model="modelValue.xAxis.axisLabel.interval">
              <el-radio-button label="auto">自动</el-radio-button>
              <el-radio-button label="value">数值</el-radio-button>
            </el-radio-group>
            <div v-if="modelValue.xAxis.axisLabel.interval === 'value'">
              <el-input-number
                v-model="modelValue.xAxis.axisLabel.intervalValue"
                controls-position="right"
                class="w-80px"
              />
              <span
                class="text-gray ml-1 text-[12px]"
              >0-显示所有，1-间隔1位，以此类推...</span>
            </div>
          </el-form-item>
          <el-form-item label="x轴刻度标签-是否朝内">
            <el-switch v-model="modelValue.xAxis.axisLabel.inside"></el-switch>
          </el-form-item>
          <el-form-item label="x轴刻度标签-标签与轴线间距离">
            <el-input-number v-model="modelValue.xAxis.axisLabel.margin" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="x轴刻度标签-文字超出宽度策略">
            <el-radio-group v-model="modelValue.xAxis.axisLabel.overflow">
              <el-radio-button label="none">隐藏</el-radio-button>
              <el-radio-button label="truncate">截断</el-radio-button>
              <el-radio-button label="break">换行</el-radio-button>
              <el-radio-button label="breakAll">换行-强制单次内</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-form>
    </el-collapse-item>
    <el-collapse-item title="网格 y 轴（yAxis）">
      <el-form
        v-if="modelValue.yAxis"
        label-position="top"
        class="pl-2 pr-2"
        size="small"
      >
        <el-form-item label="是否显示">
          <el-switch v-model="modelValue.yAxis.show"></el-switch>
        </el-form-item>
        <el-form-item label="位置">
          <el-radio-group v-model="modelValue.yAxis.position">
            <el-radio-button label="left">顶部</el-radio-button>
            <el-radio-button label="right">底部</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="偏移量">
          <el-input-number
            v-model="modelValue.yAxis.offset"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="是否是反向坐标轴">
          <el-switch v-model="modelValue.yAxis.inverse"></el-switch>
        </el-form-item>
        <el-form-item label="坐标轴名称">
          <el-input v-model="modelValue.yAxis.name"></el-input>
        </el-form-item>
        <el-form-item label="坐标轴名称位置">
          <el-radio-group v-model="modelValue.yAxis.nameLocation">
            <el-radio-button label="start">头部</el-radio-button>
            <el-radio-button label="middle">中间</el-radio-button>
            <el-radio-button label="end">尾部</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="坐标轴名称间隙">
          <el-input-number
            v-model="modelValue.yAxis.nameGap"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="坐标轴名称旋转">
          <el-slider
            v-model="modelValue.yAxis.nameRotate"
            :min="-90"
            :max="90"
            show-input
            input-size="small"
          />
        </el-form-item>

        <el-form-item label="自动计算的坐标轴最小间隔大小">
          <el-input-number
            v-model="modelValue.yAxis.minInterval"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="自动计算的坐标轴最大间隔大小">
          <el-radio-group v-model="modelValue.yAxis.maxInterval">
            <el-radio-button label="auto">自动</el-radio-button>
            <el-radio-button label="value">具体值</el-radio-button>
          </el-radio-group>
          <el-input-number
            v-if="modelValue.yAxis.maxInterval === 'value'"
            v-model="modelValue.yAxis.maxIntervalValue"
            controls-position="right"
          />
        </el-form-item>

        <hr class="mt-2 mb-2" />
        <template v-if="modelValue.yAxis.axisLabel">
          <el-form-item label="y轴刻度标签-是否显示">
            <el-switch v-model="modelValue.yAxis.axisLabel.show"></el-switch>
          </el-form-item>
          <el-form-item label="y轴刻度标签-旋转角度">
            <el-slider
              v-model="modelValue.yAxis.axisLabel.rotate"
              :min="-90"
              :max="90"
              show-input
              input-size="small"
            />
          </el-form-item>
          <el-form-item label="y轴刻度标签-显示间隔">
            <el-radio-group v-model="modelValue.yAxis.axisLabel.interval">
              <el-radio-button label="auto">自动</el-radio-button>
              <el-radio-button label="value">数值</el-radio-button>
            </el-radio-group>
            <div v-if="modelValue.yAxis.axisLabel.interval === 'value'">
              <el-input-number
                v-model="modelValue.yAxis.axisLabel.intervalValue"
                controls-position="right"
                class="w-80px"
              />
              <span style="font-size: 12px;color: #999;margin-left:5px;">0-显示所有，1-间隔1位，以此类推...</span>
            </div>
          </el-form-item>
          <el-form-item label="y轴刻度标签-是否朝内">
            <el-switch v-model="modelValue.yAxis.axisLabel.inside"></el-switch>
          </el-form-item>
          <el-form-item label="y轴刻度标签-标签与轴线间距离">
            <el-input-number v-model="modelValue.yAxis.axisLabel.margin" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="y轴刻度标签-文字超出宽度策略">
            <el-radio-group v-model="modelValue.yAxis.axisLabel.overflow">
              <el-radio-button label="none">隐藏</el-radio-button>
              <el-radio-button label="truncate">截断</el-radio-button>
              <el-radio-button label="break">换行</el-radio-button>
              <el-radio-button label="breakAll">换行-强制单次内</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup>
import _ from 'lodash'
import {computed, watch} from "vue";

const modelValue = defineModel({})

const props = defineProps({
  eleDef: Object,
  item: Object
})

const isShowColor = computed(() => {
  let comp = _.get(props.eleDef, '_node');
  return _.indexOf(["c$chartBarComp", "c$chartLineComp", "c$chartPieComp"], comp) >= 0;
})

const rateTooltip = (val) => {
  return `${val}%`;
}

/*watch(() => props.eleDef?._code, (val) => {
  if (!props.eleDef._ext) props.eleDef._ext = {};
})*/
</script>
